import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip } from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { PassedTrendingTooltip } from "./tooltip";

const data = {
  start: 1752080015446,
  passed: 59.5,
  skipped: 10.5,
  failed: 10,
  broken: 10,
  unknown: 10,
};

function randomize(value: number, maxDiff = 10.5) {
  const diff = (Math.random() - 0.5) * maxDiff * 2;
  return Number((value + diff).toFixed(2));
}

const newDataWithNoise: {
  start: number;
  passed: number;
  skipped: number;
  failed: number;
  broken: number;
  unknown: number;
}[] = [];

let currentTimestamp = data.start;

for (let i = 0; i < 60; i++) {
  const passed = randomize(data.passed);
  const skipped = randomize(data.skipped);
  const failed = randomize(data.failed);
  const broken = randomize(data.broken);
  const unknown = Number((100 - passed - skipped - failed - broken).toFixed(2));

  newDataWithNoise.push({
    start: currentTimestamp,
    passed,
    skipped,
    failed,
    broken,
    unknown,
  });

  currentTimestamp += 60000 * 60 * 24;
}

export function PassedTrendingChart() {
  return (
    <Card className="gap-2 xl:py-4 2xl:py-6">
      <CardHeader className="xl:px-4 2xl:px-6">
        <CardTitle className="text-sm">Passed trending</CardTitle>
      </CardHeader>
      <CardContent className="h-full gap-2 xl:px-4 2xl:px-6">
        <ResponsiveContainer width="100%" height="100%" debounce={200}>
          <LineChart
            accessibilityLayer
            data={newDataWithNoise}
            margin={{
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" stroke="var(--accent)" />
            <Tooltip content={<PassedTrendingTooltip />} />
            <Line dataKey="passed" stroke="var(--chart-1)" strokeWidth={2} dot={false} />
          </LineChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}
